<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      通过组件的props和computed属性，实现了组件级别的语言切换和翻译。 </p>
    <p>template里面的文本通过translateText方法进行翻译。（而不是$t_） </p>
    <p>同时，通过watch监听外部语言变化，及时更新组件内部状态。 </p>
    <p>组件内部的语言状态通过data属性定义，通过methods方法进行切换和翻译。</p>
    <p>组件外部可以通过props传入初始语言，也可以通过watch监听组件内部语言变化，实现全局语言状态的同步。
    </p>

    <h3>i18n 示例</h3>
    <div class="i18n-demo">
      <div class="lang-switch">
        <h4>组件独立语言切换:</h4>
        <button v-for="locale in supportedLocales" :key="locale" @click="switchLanguage(locale)"
          :class="['lang-btn', { active: currentLocale === locale }]">
          {{ locale === 'zh-CN' ? '中文' : 'English' }}
        </button>
      </div>

      <div class="demo-content">
        <p>当前组件语言: {{ currentLocale }}</p>
        <p>组件支持的语言: {{ supportedLocales.join(', ') }}</p>
        <button class="demo-btn">{{ translateText('button.submit') }}</button>
        <p>翻译测试: {{ translateText('button.submit') }}</p>
        <p>如果key不存在: {{ translateText('button.nonexistent') }}</p>
        <p class="global-info">全局语言状态: {{ $locale_ || '未设置' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { t, messages } from '../locale';

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    // 允许外部传入初始语言
    initialLocale: {
      type: String,
      default: 'zh-CN'
    }
  },
  data() {
    return {
      // 组件内部的语言状态
      componentLocale: this.initialLocale || 'zh-CN'
    };
  },
  computed: {
    // 组件级别的支持语言列表
    supportedLocales() {
      return Object.keys(messages);
    },
    // 当前组件的语言
    currentLocale() {
      return this.componentLocale;
    }
  },
  methods: {
    // 组件级别的语言切换
    switchLanguage(locale) {
      if (this.supportedLocales.includes(locale)) {
        this.componentLocale = locale;
        // 触发语言变更事件，让父组件知道
        this.$emit('locale-changed', locale);
      } else {
        console.warn(`Language '${locale}' is not supported by this component`);
      }
    },
    // 组件级别的翻译方法
    translateText(key) {
      return t(key, this.componentLocale);
    }
  },
  // 监听外部语言变化
  watch: {
    initialLocale(newLocale) {
      if (newLocale && this.supportedLocales.includes(newLocale)) {
        this.componentLocale = newLocale;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

.i18n-demo {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.demo-btn {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px 0;
}

.demo-btn:hover {
  background-color: #66b1ff;
}

.lang-switch {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.lang-switch h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.lang-btn {
  padding: 6px 12px;
  margin-right: 10px;
  border: 1px solid #409eff;
  background-color: white;
  color: #409eff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.lang-btn:hover {
  background-color: #ecf5ff;
}

.lang-btn.active {
  background-color: #409eff;
  color: white;
}

.demo-content {
  margin-top: 15px;
}

.global-info {
  margin-top: 10px;
  padding: 8px;
  background-color: #f0f9ff;
  border-left: 3px solid #0ea5e9;
  font-size: 14px;
  color: #0369a1;
}

a {
  color: #42b983;
}
</style>
